<template>
    <component
        :is="currentComp"
        :item="item"
        :form-data="formData"
        :options-key="optionsKey"
        :readonly="readonly"
        :disabled="disabled"
        @event="event"
    />
</template>

<script setup>
import { markRaw } from 'vue'
import useInput from './useInput.vue'
import useRadio from './useRadio.vue'
import useCheck from './useCheck.vue'
import useSwitch from './useSwitch.vue'
import useInputNumber from './useInputNumber.vue'
import useSelect from './useSelect.vue'
import useDatePicker from './useDatePicker.vue'
import useTimePicker from './useTimePicker.vue'
import useUploadImage from './useUploadImage.vue'
const compObj = {
    useInput,
    useRadio,
    useCheck,
    useSwitch,
    useInputNumber,
    useSelect,
    useDatePicker,
    useTimePicker,
    useUploadImage
}
const props = defineProps({
    item: {
        type: Object,
        default: () => ({})
    },
    formData: {
        type: Object,
        default: () => ({})
    },
    optionsKey: {
        type: Object,
        default: () => ({ label: 'text', value: 'value' })
    },
    readonly: {
        type: Boolean,
        default: false
    },
    disabled: {
        type: Boolean,
        default: false
    }
})
const emit = defineEmits(['event'])
const state = markRaw({
    currentComp: 'useInput'
})
state.currentComp = compObj[`use${props.item.eType}`]

const event = (params) => {
    emit('event', { ...params, data: props.formData })
}
const currentComp = state.currentComp
</script>
